<template>
  <div style="height:100%;">
  <view-box ref="viewBox">
    <x-header class="header" :left-options="{backText: ''}">商城数据分析</x-header>
    <div class="content">
      <div>
        <sticky scroll-box="vux_view_box_body" :offset="46">
        <tab :line-width=2 v-model="index">
          <tab-item class="vux-center" :selected="index === i" v-for="(item, i) in list2" @click="index=i" :key="i">{{item}}</tab-item>
        </tab>
        </sticky>

        <div class="tab-swiper vux-center" style="padding-top:10px;" v-show="index===0">
          <Chart width="100%" height="350px" :option="optionPie1" theme='macarons' loading></Chart>
          <ul>
            <li v-for="(x,i) of buyInfos" :key="i" class="ub pad my-item" @click="handleToCity(x)">
              <i class="fa fa-code-fork ub uc"></i>
              <div class="title uf-1">{{x.name}}</div>
              <div class="value">￥{{x.value|money}}</div>
              <div class="ub uc t-gray">
              <i class="fa fa-chevron-down"></i>
              </div>
            </li>
          </ul>
        </div>
    
        <div class="tab-swiper vux-center" style="padding-top:10px;" v-show="index===1">
          <Chart width="400px" height="350px" :option="optionPie2" theme='macarons' loading></Chart>
          <ul>
            <li v-for="(x,i) of buyInfos2" :key="i" class="ub pad my-item" @click="handleToCity(x)">
              <i class="fa fa-code-fork ub uc"></i>
              <div class="title uf-1">{{x.name}}</div>
              <div class="value">￥{{x.value|money}}</div>
              <div class="ub uc t-gray">
              <i class="fa fa-chevron-down"></i>
              </div>
            </li>
          </ul>
        </div>  
      </div>     
    </div>

    <popup-picker :data="list" :columns="1" v-model="value" :show="showPicker" show-name @on-hide="showPicker=false" @on-change="onChange"></popup-picker>
  </view-box>
  </div>
</template>

<script>
import {
  XHeader,
  Tab,
  TabItem,
  Swiper,
  SwiperItem,
  TransferDom,
  PopupPicker,
  Sticky,
  ViewBox
} from "vux";
import Chart from "@/components/Chart";

export default {
  data() {
    return {
      index: 0,
      list2: ["当年商城直发采购", "当年商城经仓采购"],
      optionPie1: {},
      optionPie2: {},
      buyInfos: [],
      buyInfos2: [],

      list: [],
      value: [],
      showPicker: false,
      category_id: 0
    };
  },
  mounted() {
    this.$store.dispatch("shop_index_buy").then(resp => {
      this.buyInfos = resp.data;
      this.optionPie1 = {
        title: {
          // text: '全区物资类型分布',
          left: "right"
        },
        tooltip: {},
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "物资用途",
            type: "pie",
            radius: "55%",
            data: this.buyInfos
          }
        ]
      };
    });

    this.$store.dispatch("shop_index_buy2").then(resp => {
      this.buyInfos2 = resp.data;
      this.optionPie2 = {
        title: {
          // text: '全区物资类型分布',
          left: "right"
        },
        tooltip: {},
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "物资用途",
            type: "pie",
            radius: "55%",
            data: this.buyInfos2
          }
        ]
      };
    });
  },
  methods: {
    handleToCity(item) {
      console.log(item);
      this.category_id = item.code;
      this.showPicker = true;
      item.list1.forEach(n => {
        this.list.push({ name: n.name, value: n.code });
      });
    },
    onChange(value) {
      console.log(value);

      this.$router.push({
        name: "ShopDetail",
        params: {
          category_id: this.category_id,
          comp_id: value[0],
          type: this.index + 1
        }
      });
    }
  },
  components: {
    Chart,
    XHeader,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    PopupPicker,
    Sticky,
    ViewBox
  },
  directives: {
    TransferDom
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  i {
    margin-left: 10px;
  }
}
</style>